<template>
  <div class="status-card p-4 rounded-lg shadow-sm" :class="cardClass">
    <div class="flex items-start">
      <div class="mr-3">
        <component :is="icon" class="w-6 h-6" :class="iconClass" />
      </div>
      <div class="flex-1">
        <h3 class="font-medium" :class="titleClass">{{ title }}</h3>
        <p v-if="description" class="text-sm mt-1" :class="descriptionClass">{{ description }}</p>
        <div v-if="$slots.default" class="mt-3">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { CheckCircle, AlertCircle, AlertTriangle, Info } from 'lucide-vue-next';

const props = defineProps({
  type: {
    type: String,
    default: 'info',
    validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  customIcon: {
    type: Object,
    default: null
  }
});

const icon = computed(() => {
  if (props.customIcon) return props.customIcon;
  
  const icons = {
    success: CheckCircle,
    error: AlertCircle,
    warning: AlertTriangle,
    info: Info
  };
  
  return icons[props.type];
});

const cardClass = computed(() => {
  const classes = {
    success: 'bg-green-50 border border-green-100',
    error: 'bg-red-50 border border-red-100',
    warning: 'bg-yellow-50 border border-yellow-100',
    info: 'bg-blue-50 border border-blue-100'
  };
  
  return classes[props.type];
});

const iconClass = computed(() => {
  const classes = {
    success: 'text-green-500',
    error: 'text-red-500',
    warning: 'text-yellow-500',
    info: 'text-blue-500'
  };
  
  return classes[props.type];
});

const titleClass = computed(() => {
  const classes = {
    success: 'text-green-800',
    error: 'text-red-800',
    warning: 'text-yellow-800',
    info: 'text-blue-800'
  };
  
  return classes[props.type];
});

const descriptionClass = computed(() => {
  const classes = {
    success: 'text-green-600',
    error: 'text-red-600',
    warning: 'text-yellow-600',
    info: 'text-blue-600'
  };
  
  return classes[props.type];
});
</script>